<template>
  <div>
    <nav-top title="个人信息"
             :goback="true"></nav-top>
    <section class="information">
      <div class="input-all">
        <div class="input-name">
          <van-field class="input"
                     v-model="val.name"
                     label-width="3.75rem"
                     placeholder="请输入名称">
            <img class="icon-img"
                 :src="val.avater"
                 slot="left-icon" />
          </van-field>
        </div>
        <div class="input-sex">
          <div class="input">
            <p class="input-label">性别</p>
            <van-radio-group class="radio"
                             v-model="val.sex">
              <van-radio class="radio-item"
                         name="1">
                <span class="radio-title"
                      slot="default">男</span>
                <img class="radio-icon"
                     slot="icon"
                     slot-scope="props"
                     :src="props.checked ? '/static/icon/select-select.png' : '/static/icon/select-none.png'" />
              </van-radio>
              <van-radio class="radio-item"
                         name="2">
                <span class="radio-title"
                      slot="default">女</span>
                <img class="radio-icon"
                     slot="icon"
                     slot-scope="props"
                     :src="props.checked ? '/static/icon/select-select.png' : '/static/icon/select-none.png'" />
              </van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="input-age">
          <div class="input">
            <p class="input-label">年龄</p>
            <p class="input-value"
               @click="showPicker">{{ val.age }}</p>
          </div>
        </div>
        <div class="input-phone">
          <van-field class="input"
                     v-model="val.phone"
                     label-align="left"
                     input-align="right"
                     placeholder="请输入手机号">
            <span class="input-label"
                  slot="label">手机号</span>
          </van-field>
        </div>
        <div class="input-wxcode">
          <van-field class="input"
                     v-model="val.wxcode"
                     label-align="left"
                     input-align="right"
                     placeholder="请输入微信号">
            <span class="input-label"
                  slot="label">微信号</span>
          </van-field>
        </div>
        <div class="input-email">
          <van-field class="input"
                     v-model="val.email"
                     label-align="left"
                     input-align="right"
                     placeholder="请输入邮箱">
            <span class="input-label"
                  slot="label">邮箱</span>
          </van-field>
        </div>
        <div class="input-address">
          <div class="input">
            <p class="input-label">地址</p>
            <p class="input-value"
               @click="chooseAddress">{{ val.address }}</p>
            <div style="clear: both;"></div>
          </div>
        </div>
        <div class="input-idcard">
          <van-field class="input"
                     v-model="val.idcard"
                     label-align="left"
                     input-align="right"
                     placeholder="请输入证件号">
            <span class="input-label"
                  slot="label">护照/通行证</span>
          </van-field>
        </div>
      </div>
      <div class="common-user">
        <a href="aa">
          <p>常用预约用户</p>
          <img src="/static/icon/goto.png" />
        </a>
      </div>
      <div class="case">
        <a href="aa">
          <p>上传病例</p>
          <img v-if="!val.case"
               src="/static/icon/goto.png" />
          <p class="case-value"
             v-else>{{ val.case }}</p>
        </a>
      </div>
      <van-button @click="submit"
                  class="submit"
                  type="primary"
                  size="large">完成</van-button>
    </section>
    <van-popup v-model="showDatePicker"
               position="bottom">
      <van-datetime-picker v-model="currentDate"
                           type="date"
                           :min-date="minDate"
                           :max-date="maxDate"
                           @confirm="chooseDate"
                           @cancel="closePicker"
                           class="data-picker" />
    </van-popup>
  </div>
</template>
<script>
import NavTop from "@/components/nav/navBar";
import {
  mapGetters
} from 'vuex'
export default {
  components: {
    NavTop
  },
  computed: {
    ...mapGetters([
      'imformation'
    ]),
  },
  data () {
    return {
      showDatePicker: false,
      minDate: new Date(1900, 1, 1),
      currentDate: new Date(),
      maxDate: new Date(),
      val: {
        avater: "/static/icon/self/default-avatar.png",
        name: "安安",
        sex: "1",
        age: "2019-01-01",
        phone: "1111112222",
        wxcode: "1111111",
        email: "1111123@qq.com",
        address: "广东省深圳市胜多负广东省深圳市胜多负广东省深圳市胜多负广东省深圳市胜多负",
        idcard: "544124123123",
        case: "病例1"
      }
    };
  },
  created () {
    if (this.imformation) {
      this.val = this.imformation;
    }
    if (this.val.age)
      this.currentDate = new Date(this.val.age.replace(/-/g, "/"));
  },
  methods: {
    showPicker () {
      this.showDatePicker = true;
    },
    chooseDate (date) {
      var year = date.getFullYear();
      var month = (date.getMonth() + 1).toString();
      var day = date.getDate().toString();
      if (month.length == 1) {
        month = "0" + month;
      }
      if (day.length == 1) {
        day = "0" + day;
      }
      this.val.age = year + "-" + month + "-" + day;
      this.showDatePicker = false;
    },
    closePicker () {
      this.showDatePicker = false;
    },
    chooseAddress () {
      this.$router.push("/editAddress")
     },
    submit () { }
  }
};
</script>
<style lang="scss" scoped>
.information {
  background-color: #f5f5f7;
  .input-all {
    margin-top: 46px;
    background-color: #ffffff;
    > div {
      height: 43px;
      clear: both;
      border-bottom: 1px solid #ececec;
    }
    .input-label {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
    .input {
      padding: 17px 0 0 8px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      width: 303px;
      line-height: 1em;
    }
    .input-name {
      position: relative;
      height: 62px;
      img {
        position: relative;
        width: 36px;
        height: 36px;
        top: -9px;
      }
      .input {
        height: 62px;
        padding: 24px 0 0 7px;
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
      }
    }
    .input-sex {
      .input-label {
        margin: 0px;
        float: left;
        width: 90px;
      }
      .input {
        position: relative;
      }
      .radio {
        position: relative;
        top: -5px;
        float: right;
        right: 8px;
        .radio-item {
          float: left;
          .radio-title {
            font-size: 11px;
            line-height: 1em;
          }
          .radio-icon {
            position: relative;
            top: 2px;
            left: 8px;
            width: 16px;
            height: 15px;
          }
        }
      }
    }
    .input-address {
      height: auto;
    }
    .input-age,
    .input-address {
      position: relative;
      width: 303px;
      p {
        margin: 0;
      }
      .input-label {
        float: left;
        width: 90px;
      }
      .input-value {
        width: 205px;
        text-align: right;
        float: left;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        line-height: 1em;
        padding-bottom: 10px;
      }
    }
  }
  .common-user,
  .case {
    height: 27px;
    margin-top: 9px;
    background-color: #ffffff;
    clear: both;
    padding: 17px 17px 0 9px;
    width: 294px;
    position: relative;
    p {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 1em;
      width: 100px;
      float: left;
      margin: 0;
    }
    img {
      position: relative;
      top: -4px;
      float: right;
      width: 8px;
      height: 16px;
    }
    .case-value {
      width: 194px;
      text-align: right;
      float: left;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(6, 164, 79, 1);
      line-height: 1em;
    }
  }
  .submit {
    width: 279px;
    height: 44px;
    margin: 83px 20px 20px 20px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: #06a44f;
    border: none;
  }
}
</style>